WHY are these changes introduced?

This PR builds on the previous UI components by adding the API version selector, which allows users to switch between different Shopify Admin API versions. This is the fourth PR in the 8-PR migration stack.

Context: The GraphiQL console needs to support querying different versions of the Shopify Admin API (e.g., 2024-10, 2025-01, unstable). The current template-based implementation uses vanilla JavaScript event listeners and manual DOM manipulation to handle version changes. By creating a declarative React component, we can:

• Use React's state management instead of manual DOM updates
• Integrate seamlessly with the GraphiQL editor
• Make version changes easier to test and track
• Provide a consistent UI with other Polaris components

WHAT is this pull request doing?

This PR adds a single, focused component for API version selection using Shopify Polaris's Select component.

Key Changes:

ApiVersionSelector Component (src/components/ApiVersionSelector/):

• Dropdown selector built on Polaris Select component
• Accepts list of available versions as props
• Controlled component pattern with value and onChange
• Hidden label for accessibility ("API version")
• Replaces: Vanilla JS event listener (addEventListener('change')) and manual DOM manipulation

Props Interface:

interface ApiVersionSelectorProps {
  versions: string[]      // e.g., ['2024-10', '2025-01', 'unstable']
  value: string          // Currently selected version
  onChange: (version: string) => void  // Callback when user selects new version
}

Usage Example:

<ApiVersionSelector
  versions={['2024-10', '2025-01', 'unstable']}
  value={currentVersion}
  onChange={(newVersion) => {
    // Update GraphiQL schema and re-fetch introspection
    setCurrentVersion(newVersion)
  }}
/>

Testing:

• 94 lines of comprehensive tests
• Tests rendering with different version lists
• Tests selection change callbacks
• Tests accessibility features

Files Added:

• src/components/ApiVersionSelector/ApiVersionSelector.tsx - Component implementation
• src/components/ApiVersionSelector/ApiVersionSelector.test.tsx - 94 lines of tests
• src/components/ApiVersionSelector/index.ts - Barrel export

Dependencies

Builds on:

• PR feat(graphiql): add graphiql-console package foundation #6578 (package foundation with Polaris dependencies)
• PR feat(graphiql): add shared types, constants, and validation #6579 (type definitions)
• PR feat(graphiql): add base UI components #6580 (base UI component patterns)

How to test your changes?

# Run component tests
pnpm --filter @shopify/graphiql-console test ApiVersionSelector.test.tsx

# Type check
pnpm --filter @shopify/graphiql-console tsc --noEmit

# All 94 lines of tests should pass, covering:
# - Rendering with version list
# - Version selection and onChange callbacks
# - Accessibility (hidden label)

Manual Testing:
You can test the component in the App by simulating version changes:

import {ApiVersionSelector} from './components/ApiVersionSelector'
import {useState} from 'react'

const [version, setVersion] = useState('2024-10')

<ApiVersionSelector
  versions={['2024-10', '2025-01', 'unstable']}
  value={version}
  onChange={setVersion}
/>

Measuring impact

• n/a - this is a foundational UI component

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes